<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{admin/layout/base}">
<head>
    <title>通知模板管理</title>
    <style>
        .template-card {
            margin-bottom: 1rem;
            border-radius: 0.5rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .template-card:hover {
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }
        .template-header {
            padding: 1rem;
            border-bottom: 1px solid #eee;
            background-color: #f8f9fa;
            border-radius: 0.5rem 0.5rem 0 0;
        }
        .template-body {
            padding: 1rem;
        }
        .template-footer {
            padding: 1rem;
            border-top: 1px solid #eee;
            background-color: #f8f9fa;
            border-radius: 0 0 0.5rem 0.5rem;
        }
        .badge-type {
            font-size: 0.8rem;
            padding: 0.3rem 0.6rem;
        }
        .variables-list {
            list-style: none;
            padding-left: 0;
            margin-bottom: 0;
        }
        .variables-list li {
            display: inline-block;
            margin-right: 0.5rem;
            margin-bottom: 0.5rem;
            padding: 0.2rem 0.5rem;
            background-color: #e9ecef;
            border-radius: 0.25rem;
            font-size: 0.875rem;
        }
    </style>
</head>
<body>
    <div layout:fragment="content">
        <div class="container-fluid">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2>通知模板管理</h2>
                <button class="btn btn-primary" onclick="showCreateTemplateModal()">
                    <i class="fas fa-plus"></i> 新建模板
                </button>
            </div>

            <div class="row" id="templates-container">
                <div class="col-md-6 col-lg-4" th:each="template : ${templates}">
                    <div class="template-card">
                        <div class="template-header d-flex justify-content-between align-items-center">
                            <h5 class="mb-0" th:text="${template.name}"></h5>
                            <span class="badge badge-type" th:classappend="${template.type == 'SMS' ? 'badge-info' : (template.type == 'EMAIL' ? 'badge-primary' : 'badge-secondary')}"
                                  th:text="${template.type}"></span>
                        </div>
                        <div class="template-body">
                            <p class="text-muted mb-2">代码: <span th:text="${template.code}"></span></p>
                            <p class="mb-3" th:text="${template.content}"></p>
                            <div th:if="${template.variables}">
                                <h6 class="mb-2">变量列表:</h6>
                                <ul class="variables-list">
                                    <li th:each="var : ${#strings.listSplit(template.variables, ',')}">
                                        {{<span th:text="${var}"></span>}}
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="template-footer">
                            <div class="btn-group">
                                <button class="btn btn-sm btn-outline-primary" th:onclick="'editTemplate(' + ${template.id} + ')'">
                                    <i class="fas fa-edit"></i> 编辑
                                </button>
                                <button class="btn btn-sm btn-outline-danger" th:onclick="'deleteTemplate(' + ${template.id} + ')'">
                                    <i class="fas fa-trash"></i> 删除
                                </button>
                                <button class="btn btn-sm btn-outline-success" th:onclick="'testTemplate(\'' + ${template.code} + '\')'">
                                    <i class="fas fa-play"></i> 测试
                                </button>
                            </div>
                            <div class="float-end">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" th:id="'status-' + ${template.id}"
                                           th:checked="${template.status == 1}"
                                           th:onchange="'updateTemplateStatus(' + ${template.id} + ', this.checked)'">
                                    <label class="form-check-label" th:for="'status-' + ${template.id}">启用</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 模板编辑模态框 -->
        <div class="modal fade" id="templateModal" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="templateModalTitle">编辑模板</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <form id="templateForm">
                            <input type="hidden" id="templateId">
                            <div class="mb-3">
                                <label class="form-label">模板名称</label>
                                <input type="text" class="form-control" id="templateName" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">模板代码</label>
                                <input type="text" class="form-control" id="templateCode" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">模板类型</label>
                                <select class="form-select" id="templateType" required>
                                    <option value="SMS">短信</option>
                                    <option value="EMAIL">邮件</option>
                                    <option value="SYSTEM">系统</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">模板内容</label>
                                <textarea class="form-control" id="templateContent" rows="5" required></textarea>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">变量列表 (JSON格式)</label>
                                <textarea class="form-control" id="templateVariables" rows="3"></textarea>
                                <small class="text-muted">示例: [{"name": "userName", "description": "用户名称"}]</small>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" onclick="saveTemplate()">保存</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 测试模板模态框 -->
        <div class="modal fade" id="testModal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">测试模板</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <form id="testForm">
                            <div class="mb-3">
                                <label class="form-label">变量数据 (JSON格式)</label>
                                <textarea class="form-control" id="testData" rows="5" required></textarea>
                                <small class="text-muted">示例: {"userName": "张三"}</small>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">处理结果</label>
                                <textarea class="form-control" id="testResult" rows="5" readonly></textarea>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" onclick="processTemplate()">处理</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <th:block layout:fragment="scripts">
        <script th:src="@{/js/admin/notification-templates.js}"></script>
    </th:block>
</body>
</html> 